$re: 75;
@function res($num) {
  @return ($num/75) * 1rem;
}
@mixin clear {
  &::after{
    content:'';
    display:block;
    clear:both;
  }
}
@mixin font($size,$lineHeight) {
  font-size:$size;
  line-height: $lineHeight;
}
html {
  body {
    font-size: 30rem / $re;
    .dialog_box {
      position: fixed;
      top: 0rem / $re;
      left: 0rem / $re;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      .dialog_container {
        background: #fff;
        min-width: 375rem / $re;
        border-radius: 10rem / $re;
        min-height: 100rem / $re;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        .title {
          @include font(30rem / $re,50rem / $re);
          width: 100%;
          text-align: center;
          padding:10rem / $re;
        }
        .content {
          width: 100%;
          min-height: 50rem / $re;
          padding:10rem / $re;
          box-sizing: border-box;
        }
        .footer {
          width: 100%;
          height: 60rem / $re;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          border-top:1rem / $re solid #f2f2f2;
          .cancel_btn,.confirm_btn{
            height:60rem / $re;
            text-align: center;
            @include font(30rem / $re,60rem / $re );
            flex:1;
            color:#333;
          }
          .cancel_btn{
            border-right: 1px solid #f2f2f2;
            box-sizing: border-box;
          }
          .confirm_btn{
            color:#fff;
            background-color: #66B1FF;
          }
        }
      }
      .dialog_shade {
        position: absolute;
        top: 0rem / $re;
        left: 0rem / $re;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}


